<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button type="primary" @click="onQuery">查询</el-button>
        <el-button @click="toBillDetail">查看详情</el-button>
        <el-button @click="toCollectionSettlement">收款核销</el-button>
        <el-button type="info" disabled @click="exportExcel">导出</el-button>
        <el-button @click="handleShortcutKeyPrint">打印(P)</el-button>
        <el-checkbox v-model="queryData.hideRedOrder" @change="getCollectionPriceManagementVoList"
          >隐藏红冲单据</el-checkbox
        >
      </div>
      <div class="btn_right">
        <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
      </div>
    </div>

    <div class="info_content_div">
      <div class="div_table">
        <div class="div_screen">
          <div class="screen_left">
            <div class="line_dialog">
              <p>往来单位</p>
              <p class="dialog_input">
                <el-tooltip
                  :disabled="queryData.companyName.length <= 6"
                  effect="dark"
                  :content="queryData.companyName"
                  :enterable="false"
                  placement="bottom-start"
                >
                  <el-select
                    v-model="queryData.xghCompanyId"
                    style="width: 100%"
                    @change="onChangeCompany"
                    filterable
                    ref="wanglaidanwei"
                  >
                    <el-option
                      style="font-size: 12px"
                      v-for="item in wldwOptions"
                      :key="item.id"
                      :label="item.companyName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-tooltip>
                <i class="el-icon-more" @click="onShowSupplier"></i>
              </p>
            </div>
            <div>
              <p>结销状态</p>
              <el-select placeholder v-model="queryData.statusList">
                <el-option
                  style="font-size: 12px"
                  v-for="item in jxztOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          <!-- </div> -->
          <div style="width: max-content;margin-left: 20px;" class="screen_right">
            <p style="flex-shrink: 0;">发生时间</p>
            <el-select @change="changeDate" v-model="monthValue" style="width: 100px;margin-right: 10px;">
              <el-option
                style="font-size: 12px"
                v-for="item in monthOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-date-picker
              v-if="isShowDate"
              v-model="nowDate"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="onClickPicker"
              value-format="yyyy-MM-dd"
              :clearable="true"
            ></el-date-picker>
          </div>
          </div>

        </div>
        <div class="table_content">
          <div class="main_table">
            <el-table
              ref="table1"
              show-summary
              :summary-method="getSummaries"
              highlight-current-row
              :header-cell-style="{
                color: '#666666',
                textAlign: 'center',
                height: '30px',
                borderColor: '#dddddd',
              }"
              :cell-style="{ textAlign: 'center' }"
              :data="tableData"
              height="100%"
              style="width: 100%"
              @row-click="onSetSubTableData"
              :row-style="rowClass"
              @row-dblclick="onRowDblClick"
            >
              <template v-for="(item, index) in columnData">
                <el-table-column
                  :show-overflow-tooltip="true"
                  :key="index"
                  :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                  v-if="item.zidingyiState"
                  :prop="item.props"
                  min-width="120px"
                  :width="item.props == 'xh' ? '50px' : item.cellWidth"
                >
                  <template slot-scope="scope">
                    <div
                      v-if="
                        item.props == 'receivablePrice' ||
                        item.props == 'collectionPrice' ||
                        item.props == 'settlementPrice' ||
                        item.props == 'collection' ||
                        item.props == 'balance'
                      "
                    >
                      {{ $formatMoney(scope.row[item.props]) }}
                    </div>
                    <div v-else>{{ scope.row[item.props] }}</div>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
          <div class="operation_button">
            <div>应收款结销情况</div>
            <el-button type="primary" @click="checkBillDetail">查看结销</el-button>
          </div>
          <div class="sub_table">
            <el-table
              ref="table2"
              show-summary
              :summary-method="getSummaries2"
              highlight-current-row
              :header-cell-style="{
                color: '#666666',
                textAlign: 'center',
                height: '30px',
                borderColor: '#dddddd',
              }"
              :cell-style="{ textAlign: 'center' }"
              :data="subTableData"
              height="100%"
              style="width: 100%"
              @current-change="handleCurrentChange"
            >
              <el-table-column :show-overflow-tooltip="true" label="序号" prop="xh" min-width="50px"></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                label="收款日期"
                prop="startTime"
                min-width="120px"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                label="收款单号"
                prop="orderNumber"
                min-width="170px"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                label="收款类型"
                prop="type"
                min-width="120px"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                label="经手人"
                prop="sysUserId_dictText"
                min-width="120px"
              ></el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="应收金额" prop="allPrice" min-width="120px">
                <template slot-scope="scope">{{ $formatMoney(scope.row['allPrice']) }}</template>
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="当前已结销" prop="offPrice" min-width="120px">
                <template slot-scope="scope">{{ $formatMoney(scope.row['offPrice']) }}</template>
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="本次收款金额" prop="thisPrice" min-width="120px">
                <template slot-scope="scope">{{ $formatMoney(scope.row['thisPrice']) }}</template>
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                label="备注"
                prop="remark"
                min-width="120px"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择往来单位弹框 -->
    <DialogSupplier ref="supplierRef" @onSelectSupplier="onSelectSupplier"></DialogSupplier>
    <!-- 新增往来单位弹框 -->
    <DialogSupplierAdd ref="supplierAddRef" @onAddSubmit="onAddSupplier"></DialogSupplierAdd>
    <!-- 列配置弹框 -->
    <CConfiguration
      ref="setColumnRef"
      :columnDataArr="columnData"
      :defaultColumnDataArr="defaultColumnData"
      orderType="应收款管理"
      @onSaveColumn="onSaveColumn"
    ></CConfiguration>
    <!-- 打印 -->
    <dialog-print ref="print"></dialog-print>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CConfiguration from '@/components/c_column/columnConfiguration1'
import DialogSupplier from '../../components/dialogSupplier'
import DialogSupplierAdd from '../../components/dialogSupplierAdd'
/**打印 */
import dialogPrint from '@/views/components/dialogPrintRecord'
import { getAction, postAction, downPostFile } from '@/api/manage'
import { dateStrFromDate } from '@/utils/DateFormatter'
// 导入调用处理权限数据方法
import { handlePermissions, handleOtherPerms, handlePagePermissions } from '@/utils/index'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { delcommafy, formatMoney } from '../../../utils'
export default {
  name: 'receivables',
  mixins: [JeecgListMixin],
  components: {
    CConfiguration,
    DialogSupplier,
    DialogSupplierAdd,
    dialogPrint,
  },
  computed: {
    ...mapGetters(['name']),
    buttonsPermissions() {
      return handlePermissions('应收款管理')
    },
    printPermissions() {
      return handleOtherPerms('单据可多次打印')
    },
  },
  created() {
    // 默认获取当月时间
    this.getTimeRange(this.$setTimeRange(5))
    this.getData()
  },
  watch: {},
  data() {
    return {
      isShowDate: false,
      monthValue: '本月',
      monthOptions: [
        {
          value: '今日',
          label: '今日',
        },
        {
          value: '本周',
          label: '本周',
        },
        {
          value: '本月',
          label: '本月',
        },
        {
          value: '本年',
          label: '本年',
        },
        {
          value: '自定义',
          label: '自定义',
        },
      ],
      // 往来单位
      wldwOptions: [],
      // 结销状态
      jxztOptions: [
        {
          value: '0,1,2',
          label: '全部',
        },
        {
          value: '2',
          label: '已结销',
        },
        {
          value: '1',
          label: '部分结销',
        },
        {
          value: '0',
          label: '未结销',
        },
      ],
      // 查询条件数据
      queryData: {
        hideRedOrder: true,
        xghCompanyId: '',
        companyName: '',
        statusList: '0,1,2',
        startDate: '',
        endDate: '',
      },
      nowDate: [],
      // 表格数据
      tableData: [],
      // 子表数据
      subTableData: [],
      // 列配置数据
      defaultColumnData: [],
      columnData: [
        {
          morenName: '序号',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: true,
          props: 'xh',
        },
        {
          morenName: '发生日期',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'createOrderDate',
        },
        {
          morenName: '结销状态',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'settlementStatus_dictText',
        },
        {
          morenName: '单据编号',
          zidingyiName: '',
          morenState: true,
          cellWidth: '170px',
          zidingyiState: true,
          noModify: false,
          props: 'orderNumber',
        },
        {
          morenName: '单据类型',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'orderType_dictText',
        },
        {
          morenName: '往来单位',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'xghCompanyId_dictText',
        },
        {
          morenName: '经手人',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'xghSysUserId_dictText',
        },
        {
          morenName: '应收款类型',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'collectionType',
        },
        {
          morenName: '应收款',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'receivablePrice',
        },
        {
          morenName: '代收金额',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'collectionPrice',
        },
        {
          morenName: '结算金额',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'settlementPrice',
        },
        {
          morenName: '收款',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'collection',
        },
        {
          morenName: '余额',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'balance',
        },
        {
          morenName: '计划结算日期',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'planSettlementDate',
        },
        {
          morenName: '对账日期',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'reconciliationDate',
        },
        {
          morenName: '对账人',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'reconciliationUser',
        },
        {
          morenName: '单据备注',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'remark',
        },
        {
          morenName: '单据附记',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'postscript',
        },
      ],
      updateId: '', // 修改列配置时返回的id
      currentRow: null,
      subCurrentRow: null,
      printClick: false,
    }
  },
  mounted() {
    this.selectTitle()
  },
  methods: {
    // 打印
    handleShortcutKeyPrint() {
      this.printClick = true
      this.getCollectionPriceManagementVoList()
    },
    handlePrint() {
      if (!this.buttonsPermissions.DaYin) {
        this.$elMessage.warning('未拥有打印权限！')
      } else if (!this.tableData || this.tableData.length <= 0) {
        this.$elMessage.warning('没有要打印的记录！')
      } else {
        let printData = {
          wanglaidanwei: this.$refs.wanglaidanwei.selected.label,
          printExclusive: this.tableData.map((item) => {
            item.collection = formatMoney(item.collection)
            item.balance = formatMoney(item.balance)
            return item
          }),
        }
        console.log(printData, '111111')
        // 可以多次打印设置
        if (this.printPermissions) {
          this.$refs.print.show(printData, this.columnData, '应收款管理')
        } else {
          if (this.$lcStorage.get('printLimitValue')) {
            // 获取打印次数
            this.getPrintNum('应收款管理', () => {
              this.$refs.print.show(printData, this.columnData, '应收款管理')
            })
          } else {
            this.$refs.print.show(printData, this.columnData, '应收款管理')
          }
        }
      }
    },
    // 初始化查询列配置值
    async selectTitle() {
      let obj = await this.$setColumn.selectColumn('应收款管理')
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn('应收款管理', this.columnData, 0, this.updateId)
        this.updateId = id
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn(value) {
      this.columnData = value
      let res = await this.$setColumn.editColumn('应收款管理', this.columnData, this.updateId)
      if (res.code == 200) {
        this.$elMessage.success(res.message)
      } else {
        this.$elMessage.error(res.message)
      }
    },
    handleCurrentChange(val) {
      this.subCurrentRow = val
    },
    // 查看结销
    checkBillDetail() {
      if (this.subTableData.length == 1) {
        this.subCurrentRow = this.subTableData[0]
      }
      if (this.subCurrentRow) {
        this.$router.push({
          name: 'paymentManage-paymentBill-billCollectionSettlement',
          params: { source: 'bill', billId: this.subCurrentRow.xghSettlementOrderId },
        })
      } else {
        this.$elMessage.warning('请选择要查看的单据')
      }
    },
    // 查看详情
    toBillDetail() {
      if (this.currentRow) {
        let orderNumber = this.currentRow.orderNumber
        let id = this.currentRow.orderId
        if (orderNumber.indexOf('xsckd') > -1) {
          this.$router.push({ name: 'saleManage-salesBill-billSalesDelivery', params: { billId: id } })
        } else if (orderNumber.indexOf('xsthd') > -1) {
          this.$router.push({ name: 'saleManage-salesBill-billSalesReturn', params: { billId: id } })
        } else if (orderNumber.indexOf('xshhd') > -1) {
          if (!handlePagePermissions('销售换货')) {
            return this.$elMessage.warning('没有权限！')
          }
          this.$router.push({ name: 'saleManage-salesBill-billSalesExchange', params: { billId: id } })
        } else {
          this.$elMessage.warning('暂不支持查看该单据')
        }
      }
    },
    // 收款核销
    toCollectionSettlement() {
      if (!this.currentRow || !this.currentRow.xghCompanyId) {
        this.$elMessage.warning('请先选择需要核销的单据')
        return
      }
      this.$router.push({
        name: 'paymentManage-paymentBill-billCollectionSettlement',
        params: {
          source: 'company',
          xghCompanyId: this.currentRow.xghCompanyId,
        },
      })
    },
    // 导出
    exportExcel() {
      downPostFile('导出应收款管理查询接口', '应收款管理', {
        lists: this.columnData,
        obj: this.queryData,
      })
    },
    // 设置主表行颜色
    rowClass(row) {
      if (row.row.settlementStatus == '1') {
        return { color: '#19AF36' }
      } else if (row.row.settlementStatus == '0') {
        return { color: '#1C95FC' }
      } else {
        return { color: '#666666' }
      }
    },
    // 点击主表获取子表数据
    onSetSubTableData(row) {
      this.currentRow = row
      this.getSettlementOrderInfoList(row.orderId)
    },
    // 获取数据
    getData() {
      this.getGysStorage()
      this.getCollectionPriceManagementVoList()
    },
    /**
     * 初始化默认获取缓存中存储的曾经点击过的供应商数据
     */
    getGysStorage() {
      getAction('/xghCompany/xghCompany/listNoPage', {}).then((res) => {
        if (res.code === 200) {
          this.wldwOptions = res.result
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    getCollectionPriceManagementVoList() {
      this.currentRow = null
      console.log(this.queryData)
      let params = {
        ...this.queryData,
        statusList: this.queryData.statusList.split(','),
      }
      postAction('/xghCollectionPay/xghCollectionPay/getCollectionPriceManagementVoList', params).then((res) => {
        if (res.success) {
          let result = res.result || []
          this.tableData = result
          result.map((item, index) => {
            item.xh = index + 1
            item.collectionType = this.getTextByOrderNumber(item.orderNumber)
            return item
          })
          if (result.length) {
            this.currentRow = result[0]
            this.getSettlementOrderInfoList(result[0].orderId)
          }
          this.$nextTick(() => {
            this.$refs.table1.doLayout()
          })
        } else {
          this.$elMessage.error(res.message)
        }
        if (this.printClick) {
          this.handlePrint()
        }
        this.printClick = false
      })
    },
    getTextByOrderNumber(orderNumber) {
      let options = {
        xsckd: '销售应收款',
        xshhd: '销售退换货款',
        xsthd: '销售退货款',
        cgrkd: '采购应付款',
        cghhd: '采购退换货款',
        cgthd: '采购退货款',
        fkjsd: '采购预付款',
        skjsd: '客户预付款',
        yskzj: '调账(应收款增加)',
        yskjs: '调账(应收款减少)',
        yfkzj: '调账(应付款增加)',
        yfkjs: '调账(应付款减少)',
      }
      let keys = Object.keys(options)
      for (let index = 0; index < keys.length; index++) {
        const key = keys[index]
        if (orderNumber.indexOf(key) > -1) {
          return options[key]
        }
      }
      return ''
    },
    getSettlementOrderInfoList(orderId) {
      this.subCurrentRow = null
      getAction('/xghCollectionPay/xghCollectionPay/getSettlementOrderInfoList', { orderId }).then((res) => {
        if (res.success) {
          let result = res.result || []
          this.subTableData = result
          result.map((item, index) => {
            item.xh = index + 1
            return item
          })
          this.$nextTick(() => {
            this.$refs.table2.doLayout()
          })
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 打开新增往来单位弹出框
    onShowSupplierAdd() {
      this.$refs.supplierAddRef.dialogVisible = true
    },
    // 新增往来单位数据
    onAddSupplier(val) {
      this.getGysStorage()
    },
    // 打开选择往来单位弹出框
    onShowSupplier() {
      this.$refs.supplierRef.dialogVisible = true
    },
    // 当前选择往来单位数据
    onSelectSupplier(val) {
      this.queryData.xghCompanyId = val.id
      this.queryData.companyName = val.companyName
    },
    // 下拉选择往来单位
    onChangeCompany(val) {
      this.queryData.companyName = this.wldwOptions.find((item) => item.id === val).companyName
    },
    // 查询
    onQuery() {
      this.getCollectionPriceManagementVoList()
    },
    // 请求筛选条件数据
    requestQuery(obj) {
      console.log(obj, '请求')
    },
    // 判断当前选择时间段
    changeDate(val) {
      switch (val) {
        case '自定义':
          this.isShowDate = true
          break
        case '今日':
          this.getTimeRange(this.$setTimeRange(1))
          break
        case '昨天':
          this.getTimeRange(this.$setTimeRange(2))
          break
        case '本周':
          this.getTimeRange(this.$setTimeRange(3))
          break
        case '上周':
          this.getTimeRange(this.$setTimeRange(4))
          break
        case '本月':
          this.getTimeRange(this.$setTimeRange(5))
          break
        case '上月':
          this.getTimeRange(this.$setTimeRange(6))
          break
        case '本年':
          this.getTimeRange(this.$setTimeRange(7))
          break
        case '去年':
          this.getTimeRange(this.$setTimeRange(8))
          break
        default:
          break
      }
    },
    // 获取时间范围并设置
    getTimeRange(data) {
      this.isShowDate = false
      this.nowDate = [data.now, data.end]
      this.queryData.startDate = data.now + ' 00:00:00'
      this.queryData.endDate = data.end + ' 23:59:59'
    },
    // 获取当前选中时间
    onClickPicker(val) {
        if (val) {
          this.queryData.startDate = val[0] + ' 00:00:00'
          this.queryData.endDate = val[1] + ' 23:59:59'
        } else {
          this.queryData.startDate = ''
          this.queryData.endDate = ''
        }
    },
    // 触发列配置弹框
    onShowColumn() {
      this.defaultColumnData = this.$options.data().columnData
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 双击跳转
    onRowDblClick(row) {
      this.$toBillDetail(this, row.orderType, row.orderId)
    },
    // 合计列计算
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.tableData.length + '条明细'
        } else if (
          ['receivablePrice', 'collectionPrice', 'settlementPrice', 'collection', 'balance', 'thisPrice'].includes(
            column.property
          )
        ) {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = this.$formatMoney(sums[index])
          } else {
            sums[index] = ''
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 合计列计算
    getSummaries2(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.subTableData.length + '条明细'
        } else if (
          ['receivablePrice', 'collectionPrice', 'settlementPrice', 'collection', 'balance', 'thisPrice'].includes(
            column.property
          )
        ) {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = this.$formatMoney(sums[index])
          } else {
            sums[index] = ''
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
  },
}
</script>

<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

::v-deep .el-button {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 5px;
  border: none;
}

::v-deep .el-checkbox {
  display: flex;
  align-items: center;
  margin-left: 20px;

  .el-checkbox__input {
    height: 14px;
  }

  .el-checkbox__label {
    font-size: 12px;
    padding-left: 5px;
    color: #666;
  }
}

.info_operation_btn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .btn_left {
    display: flex;
    align-items: center;

    ::v-deep .el-button {
      width: 70px;
      height: 30px;
      text-align: center;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      border-radius: 0.1rem;
      border: none;
      margin-right: 10px;
      margin-left: 0;
    }
  }

  .btn_right {
    .set_up {
      font-size: 23px;
      color: rgb(153, 153, 153);
    }
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 50px);
  background: #fff;
  box-sizing: border-box;
  padding: 0 0.168761rem;
  display: flex;

  .div_table {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .div_screen {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;

      ::v-deep .el-select {
        width: 2.250141rem;
        height: 30px;
        box-sizing: border-box;
        border-radius: 4px;

        .el-input {
          .el-input__inner {
            height: 30px;
            border-color: #e3e3e3;
            font-size: 12px;
            padding-left: 0.15rem;
          }

          .el-input__suffix {
            height: 30px;
            display: flex;
            align-items: center;
          }
        }
      }

      input {
        width: 2.250141rem;
        height: 30px;
        background: #ffffff;
        border: 1px solid #e3e3e3;
        opacity: 1;
        border-radius: 4px;
        font-size: 12px;
        color: #666;
        box-sizing: border-box;
        padding: 0 0.15rem;

        &:focus {
          outline: none;
          border-color: #1890ff;
        }
      }

      .screen_left {
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;

        > div {
          // width: 200px;
          height: 30px;
          box-sizing: border-box;
          display: flex;
          align-items: center;

          > p {
            margin: 0;
            width: max-content;
            flex-shrink: 0;
            margin-right: 10px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
          }
        }

        .line_dialog {
          .dialog_input {
            width: 120px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            ::v-deep .el-select {
              margin-right: 0;

              .el-select-dropdown__item {
                p {
                  margin: 0;
                }
              }

              i {
                display: none;
              }
            }

            i {
              position: absolute;
              right: 0.12rem;
              color: #bfbfbf;
              font-size: 0.25rem;
              cursor: pointer;
            }
          }
        }
      }

      .screen_right {
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        box-sizing: border-box;

        ::v-deep .el-button {
          width: 70px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          border-radius: 0.1rem;
          border: none;
        }

        ::v-deep .el-select {
          width: 70px;
          margin-right: 0.112507rem;
        }

        ::v-deep .el-date-editor {
          width: 260px;
          height: 30px;
          background: #ffffff;
          border: 1px solid #d9d9d9;
          margin-right: 0.112507rem;
          padding: 3px 6px;

          .el-range__icon {
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .el-range-separator {
            line-height: 24px;
          }

          .el-range-input {
            font-size: 12px;
          }

          .el-range__close-icon {
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }

    .table_content {
      height: calc(100% - 70px);
      margin-top: 10px;
      box-sizing: border-box;

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        border-bottom: none;
        box-sizing: border-box;

        th,
        td {
          padding: 0;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          .cell {
            min-height: 30px;
            display: flex;
            align-items: center;
            font-size: 12px;
          }

          &:first-child {
            .cell {
              justify-content: center;
              padding: 0;
            }
          }
        }

        th {
          .cell {
            background: #ededed;
            justify-content: center;
          }
        }

        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }

      .main_table {
        width: 100%;
        height: 60%;
      }

      .operation_button {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        div {
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #666666;
        }

        ::v-deep .el-button {
          margin-right: 0;
        }
      }

      .sub_table {
        width: 100%;
        height: calc(40% - 50px);
      }
    }

    .table_pagination {
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      padding: 0.168761rem 0;
      display: flex;

      .pagination_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        ::v-deep .el-pagination {
          padding: 0;
          height: 0.525033rem;

          .el-pagination__sizes {
            margin: 0;

            .el-input {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>